import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/a.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/common/app_spaces.dart';
import 'package:finance_app/src/widgets/button/ace_close_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_svg/flutter_svg.dart';

class TutorialCameraPage extends StatefulWidget {
  const TutorialCameraPage({Key key}) : super(key: key);

  @override
  _TutorialCameraPageState createState() => _TutorialCameraPageState();
}

class _TutorialCameraPageState extends State<TutorialCameraPage> {
  GlobalKey key = GlobalKey();
  Offset position = Offset.zero;
  @override
  void initState() {
    super.initState();
    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      Future.delayed(Duration(milliseconds: 500)).then((value) {
        RenderBox box = key.currentContext.findRenderObject();
        position = box.paintBounds.bottomLeft;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData = MediaQuery.of(context);

    return WillPopScope(
      onWillPop: () async {
        return false;
      },
      child: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Scaffold(
          backgroundColor: Colors.black,
          body: Stack(
            children: [
              Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  child: Image.asset(A.assetsImagesTutorialBackground,
                      fit: BoxFit.cover)),
              Positioned(
                  top: 0.0, right: 0.0, left: 0.0, child: _buildTopBar()),
              Positioned(
                  right: 0.0, left: 0.0, bottom: 0.0, child: _buildBottomBar()),
              Container(
                color: Color.fromRGBO(118, 118, 118, 0.8),
              ),
              Positioned(
                top: (queryData.size.height / 4) - 72,
                left: 0,
                right: 0,
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.center,
                      constraints: BoxConstraints(maxHeight: 420),
                      child: Stack(
                        children: [
                          Align(
                              alignment: Alignment.center,
                              child: Container(
                                padding: const EdgeInsets.only(top: 22.0),
                                transform: Matrix4.translationValues(0, -11, 0),
                                child: Image.asset(
                                  A.assetsImagesTutorialReceipt,
                                  key: key,
                                ),
                              )),
                          Align(
                              alignment: Alignment.center,
                              child: Image.asset(
                                A.assetsImagesTutorialTint,
                              )),
                        ],
                      ),
                    ),
                    buildTurialInfo(),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  _buildBottomBar() => Container(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).padding.bottom + getDp(40),
        ),
        child: Column(
          children: [
            AppSpaces.h20,
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _buildBottomLeftBtn(),
                _buildBottomCenterBtn(),
                _buildBottomRightBtn()
              ],
            ),
          ],
        ),
      );

  Widget _buildBottomRightBtn() {
    return IconButton(
      icon: Icon(Icons.info_outline),
      onPressed: () {},
      iconSize: getDp(30),
      color: Colors.white,
    );
  }

  Widget _buildBottomCenterBtn() {
    return PressedOpacityButton(
      onPressed: () {},
      child: SvgPicture.asset(
        A.assetsImagesTakePicture,
        width: getDp(80),
        height: getDp(80),
      ),
    );
  }

  Widget _buildBottomLeftBtn() {
    return IconButton(
      icon: Image.asset(
        A.assetsImagesStyleImage,
        width: getDp(31),
        height: getDp(31),
        fit: BoxFit.contain,
      ),
      onPressed: null,
      iconSize: getDp(30),
      color: Colors.white,
    );
  }

  Widget _buildTopBar() => Padding(
        padding:
            EdgeInsets.only(top: getDp(10), left: getDp(20), right: getDp(20)),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            AceCloseButton(),
            Padding(
              padding: EdgeInsets.only(
                top: MediaQuery.of(context).padding.top,
              ),
              child: IconButton(
                icon: Image.asset(
                  A.assetsImagesStyleFlash_off_1,
                  width: getDp(25),
                  height: getDp(25),
                  fit: BoxFit.contain,
                ),
                onPressed: null,
                iconSize: getDp(30),
                color: Colors.white,
              ),
            ),
          ],
        ),
      );

  Widget buildTurialInfo() {
    return Container(
      transform: Matrix4.translationValues(-65, -35, 0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        // crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(right: 80.0),
            child: buildArrow(A.assetsImagesTutorialArrowReceipt),
          ),
          Text(
            S.current.capture_your_receipt_and_leave_the_rest_to_us,
            textAlign: TextAlign.center,
            style: TextStyle(fontWeight: FontWeight.w700, color: Colors.white),
          ),
          AppSpaces.h10,
          ElevatedButton(
              style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(aceBlueColor)),
              onPressed: null,
              child: Text(
                S.current.next,
                style: TextStyle(color: Colors.white),
              )),
        ],
      ),
    );
  }

  Widget buildArrow(String imagePath) {
    return SvgPicture.asset(
      imagePath,
      width: getDp(55),
      height: getDp(55),
    );
  }
}
